<template>
    <div>
        <div
            style="position: relative;  width: 100%; height: 70%; display: flex; justify-content: center;flex-wrap: wrap; overflow-x: hidden; align-items: center;">
            <div style="width: 100%; height:30rem; overflow: hidden;" class="imageContainer">
                <img src="@/assets/img/3.png" alt="" style="width: 100%; height: 100%; object-fit:cover;">
            </div>
            <div style="margin-top: 0; position: absolute; text-shadow: 2px 2px 10px #000; z-index: 1;">
                <h1
                    style="font-size: 2rem; color: #fff; font-weight: 500; padding: 0;border: 0;margin: 0;width: 100%; font-family:Ubuntu-Bt ;">
                    说说</h1>
            </div>
        </div>
        <div class="main-inner site-content">
            <div class="moments-container">
                <ul class="moments-inner">
                    <li class="moments-item journal" data-name="moment-kmPSK" v-for="notice in notices" :key="notice.id">

                        <span class="moment-container" >
                            <img class="avatar " alt="彦祖"
                                onerror="imgError(this)" :src="user.image" style=""
                                width="45" height="45">
                            <div class="moment-inner">
                                <span class="moment-content">
                                    <div>{{ notice.content }}</div>
                                </span>
                                <div class="moment-footer">
                                    <div class="moment-time flex-child-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
                                            width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:weather-night"
                                            class="iconify moment-time-icon iconify--mdi">
                                            <path fill="currentColor"
                                                d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31">
                                            </path>
                                        </svg>
                                       <div>{{notice.time}}</div>
                                    </div>
                                    <!-- 评论内容 -->
                                    <div class="moment-tools">
                                        <span class="comment-js noselect">
                                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
                                                width="1em" height="1em" viewBox="0 0 24 24"
                                                data-icon="solar:chat-dots-outline" class="iconify iconify--solar">
                                                <path fill="currentColor" fill-rule="evenodd"
                                                    d="M10.46 1.25h3.08c1.603 0 2.86 0 3.864.095c1.023.098 1.861.3 2.6.752a5.75 5.75 0 0 1 1.899 1.899c.452.738.654 1.577.752 2.6c.095 1.004.095 2.261.095 3.865v1.067c0 1.141 0 2.036-.05 2.759c-.05.735-.153 1.347-.388 1.913a5.75 5.75 0 0 1-3.112 3.112c-.805.334-1.721.408-2.977.43a11 11 0 0 0-.929.036c-.198.022-.275.054-.32.08c-.047.028-.112.078-.224.232c-.121.166-.258.396-.476.764l-.542.916c-.773 1.307-2.69 1.307-3.464 0l-.542-.916a11 11 0 0 0-.476-.764c-.112-.154-.177-.204-.224-.232c-.045-.026-.122-.058-.32-.08c-.212-.023-.49-.03-.93-.037c-1.255-.021-2.171-.095-2.976-.429A5.75 5.75 0 0 1 1.688 16.2c-.235-.566-.338-1.178-.389-1.913c-.049-.723-.049-1.618-.049-2.76v-1.066c0-1.604 0-2.86.095-3.865c.098-1.023.3-1.862.752-2.6a5.75 5.75 0 0 1 1.899-1.899c.738-.452 1.577-.654 2.6-.752C7.6 1.25 8.857 1.25 10.461 1.25M6.739 2.839c-.914.087-1.495.253-1.959.537A4.25 4.25 0 0 0 3.376 4.78c-.284.464-.45 1.045-.537 1.96c-.088.924-.089 2.11-.089 3.761v1c0 1.175 0 2.019.046 2.685c.045.659.131 1.089.278 1.441a4.25 4.25 0 0 0 2.3 2.3c.515.214 1.173.294 2.429.316h.031c.398.007.747.013 1.037.045c.311.035.616.104.909.274c.29.17.5.395.682.645c.169.232.342.525.538.856l.559.944a.52.52 0 0 0 .882 0l.559-.944c.196-.331.37-.624.538-.856c.182-.25.392-.476.682-.645c.293-.17.598-.24.909-.274c.29-.032.639-.038 1.037-.045h.032c1.255-.022 1.913-.102 2.428-.316a4.25 4.25 0 0 0 2.3-2.3c.147-.352.233-.782.278-1.441c.046-.666.046-1.51.046-2.685v-1c0-1.651 0-2.837-.089-3.762c-.087-.914-.253-1.495-.537-1.959a4.25 4.25 0 0 0-1.403-1.403c-.464-.284-1.045-.45-1.96-.537c-.924-.088-2.11-.089-3.761-.089h-3c-1.651 0-2.837 0-3.762.089"
                                                    clip-rule="evenodd"></path>
                                                <path fill="currentColor"
                                                    d="M9 11a1 1 0 1 1-2 0a1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0">
                                                </path>
                                            </svg>
                                            <span style="margin-left: 3px;">0</span>
                                        </span>
                                        <span class="moment-like noselect" data-links="22">
                                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
                                                width="1em" height="1em" viewBox="0 0 24 24"
                                                data-icon="solar:like-broken" class="iconify iconify--solar">
                                                <path fill="currentColor"
                                                    d="m20.975 12.185l-.739-.128zm-.705 4.08l-.74-.128zM6.938 20.477l-.747.065zm-.812-9.393l.747-.064zm7.869-5.863l.74.122zm-.663 4.045l.74.121zm-6.634.411l-.49-.568zm1.439-1.24l.49.569zm2.381-3.653l-.726-.189zm.476-1.834l.726.188zm1.674-.886l-.23.714zm.145.047l.229-.714zM9.862 6.463l.662.353zm4.043-3.215l-.726.188zm-2.23-1.116l-.326-.675zM3.971 21.471l-.748.064zM3 10.234l.747-.064a.75.75 0 0 0-1.497.064zm17.236 1.823l-.705 4.08l1.478.256l.705-4.08zm-6.991 9.193H8.596v1.5h4.649zm-5.56-.837l-.812-9.393l-1.495.129l.813 9.393zm11.846-4.276c-.507 2.93-3.15 5.113-6.286 5.113v1.5c3.826 0 7.126-2.669 7.764-6.357zM13.255 5.1l-.663 4.045l1.48.242l.663-4.044zm-6.067 5.146l1.438-1.24l-.979-1.136L6.21 9.11zm4.056-5.274l.476-1.834l-1.452-.376l-.476 1.833zm1.194-2.194l.145.047l.459-1.428l-.145-.047zm-1.915 4.038a8.4 8.4 0 0 0 .721-1.844l-1.452-.377A7 7 0 0 1 9.2 6.11zm2.06-3.991a.89.89 0 0 1 .596.61l1.452-.376a2.38 2.38 0 0 0-1.589-1.662zm-.863.313a.52.52 0 0 1 .28-.33l-.651-1.351c-.532.256-.932.73-1.081 1.305zm.28-.33a.6.6 0 0 1 .438-.03l.459-1.428a2.1 2.1 0 0 0-1.548.107zm2.154 8.176h5.18v-1.5h-5.18zM4.719 21.406L3.747 10.17l-1.494.129l.971 11.236zm-.969.107V10.234h-1.5v11.279zm-.526.022a.263.263 0 0 1 .263-.285v1.5c.726 0 1.294-.622 1.232-1.344zM14.735 5.343a5.5 5.5 0 0 0-.104-2.284l-1.452.377a4 4 0 0 1 .076 1.664zM8.596 21.25a.916.916 0 0 1-.911-.837l-1.494.129a2.416 2.416 0 0 0 2.405 2.208zm.03-12.244c.68-.586 1.413-1.283 1.898-2.19L9.2 6.109c-.346.649-.897 1.196-1.553 1.76zm13.088 3.307a2.416 2.416 0 0 0-2.38-2.829v1.5c.567 0 1 .512.902 1.073zM3.487 21.25c.146 0 .263.118.263.263h-1.5c0 .682.553 1.237 1.237 1.237zm9.105-12.105a1.583 1.583 0 0 0 1.562 1.84v-1.5a.083.083 0 0 1-.082-.098zm-5.72 1.875a.92.92 0 0 1 .316-.774l-.98-1.137a2.42 2.42 0 0 0-.83 2.04z">
                                                </path>
                                            </svg>
                                            <span class="moment-like-text">22</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="comment-box">


                                    <div class="comment" name="moment-kmPSK" kind="Moment" group="moment.halo.run">
                                        <div id="comment-moment-halo-run-Moment-moment-kmPSK"></div>


                                    </div>

                                </div>
                            </div>
                        </span>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user:{},
            notices:[],
        }
    },
    mounted(){
        this.$request.get('user/super').then(res => {
                this.user = res.data;
            })
            this.$request.get('notice/recommend').then(res => {
                this.notices = res.data;
            })
    }

}
</script>

<style scoped>
.main-inner {
    position: relative;
    z-index: 1;
}
.site-content {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffc;
    padding: 0 10px;
}

.moments-container {
    margin: 20px 0;
    filter: brightness(1);
}
.moments-inner {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline;
    position: relative;
}
.moment-container .moment-inner {
    width: 100%;
    margin: auto 15px;
    padding: .8em 1.2em;
    position: relative;
    background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) 95%) 0% 0% / cover, url(https://cdn.lixingyong.com/2020/07/24/82189222_p0.jpg) 0% 0% / cover;
    background-position: center;
    color: var(--double-font-color);
    border-radius: 5px;
    box-shadow: 0 1px 2px #00000026;
    transition: all .3s ease 0s;
}
 .moment-inner:after {
    content: '';
    border-right-color: black;
    color: #000;
}

.moments-item {
    margin-bottom: 30px;
}
.moment-container {
    display: flex;
    --single-bg-and-btn-color: #E6E6FA;
    --single-font-color: #000000;
    --double-bg-and-btn-color: #F0FFFF;
    --double-font-color: #000000;
    --single-bg-and-btn-color: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) 95%) 0% 0% / cover, url(https://cdn.lixingyong.com/2020/07/24/82189222_p0.jpg) 0% 0% / cover;
    --double-bg-and-btn-color: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) 95%) 0% 0% / cover, url(https://cdn.lixingyong.com/2020/07/24/82189222_p0.jpg) 0% 0% / cover;
}

.avatar {
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    padding: 2px;
    float: left;
    border-radius: 100%;
    transition: transform .4s ease-out;
}

.moment-content {
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.5;
}

.moment-footer {
    margin-top: 10px;
    border-top: 1px dashed #fff;
    padding-top: 5px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.flex-child-center {
    display: inline-flex;
    align-items: center;
    gap: .375em;
}

.comment-js{
    float: right;
    margin-left: 15px;
}
.moment-like {
    cursor: pointer;
}

.moment-inner:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: rgb(13, 14, 14);
    border-width: 10px;
    top: 4px;
}
</style>